<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>数字连连看</title>
        <style type="text/css">
            body {
                font-family:arial,\5b8b\4f53;
                background-color:black;
            }
            div {
                text-align:center;
                margin:0 auto;
            }
            table {
                border-collapse:separate;
                border-spacing:5px 5px;
                border:1px green dashed;
                text-align:center;
                margin:10px auto;
            }
            td {
                width:55px;
                height:55px;
                font-weight:bold;
                font-size:45px;
            }
            /* 小格子的默认样式 */
            td.common {
                border:1px green solid;
                color:green;
                cursor:pointer;
            }
            /* 小格子被消除样式 */
            td.removed {
                border:1px black solid;
                color:black;
                cursor:default;
            }
            /* 小格子被选中样式 */
            td.active {
                border:1px red solid;
                color:red;
                cursor:pointer;
            }
        </style>
        <script type="text/javascript" src="../statics/js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            /* 取0-9的随机数 */
            function getRandNum() {
                return parseInt(Math.random() * 10);
            }
            
            /* 辅助打乱数组 */
            var funForRandArr = function() {
                return 0.5 - Math.random();
            }
            
            /* 将数组内的单元打乱 */
            function randArr(arr) {
                return arr.sort(funForRandArr);
            }
            
            /* 判断同行或同列的两个格子能否被消除 */
            function sameXorY(a, b1, b2, xy) {
                var blnRe = true;
                var t = b2;
                if (b1 > b2) {
                    b2 = b1;
                    b1 = t;
                }
                b1 = parseInt(b1);
                b2 = parseInt(b2);
                var tds = $('td[' + xy + '=' + a + ']');
                for (t = b1 + 1; t < b2; t ++) {
                    blnRe = tds.eq(t).hasClass('removed');
                    if (!blnRe) {
                        break;
                    }
                }
                return blnRe;
            }
            
            /* 判断四个格子能否消除 */
            function check4boxes(tdA, tdB, tdA_, tdB_, exComplex) {
                var blnRe = false;
                if (tdA_.hasClass('removed') && tdB_.hasClass('removed')) {
                    if (canBeRemoved(tdA_, tdB_, false, exComplex)) {
                        blnRe = (canBeRemoved(tdA_, tdA, false, false) && canBeRemoved(tdB_, tdB, false, false));
                    }
                }
                return blnRe;
            }
            
            /* 判断三个格子能否消除 */
            function check3boxes(tdA, tdB, td) {
                var blnRe = false;
                if (td.hasClass('removed')) {
                    blnRe = (canBeRemoved(tdA, td, false, true) && canBeRemoved(tdB, td, false, true));
                }
                return blnRe;
            }
            
            /* 判断两个格子是否能基于边缘消除 */
            function diffXandY_1(x1, y1, x2, y2) {
                var blnRe = false;
                var intRow_ = intRow - 1;
                var tdA = $('td[x=' + x1 + ']').eq(y1);
                var tdB = $('td[x=' + x2 + ']').eq(y2);
                var td = $('td[x=' + x1 + ']').eq(y2);
                if (check3boxes(tdA, tdB, td)) {
                    blnRe = true;
                } else {
                    td = $('td[x=' + x2 + ']').eq(y1);
                    blnRe = check3boxes(tdA, tdB, td);
                }
                if (!blnRe) { // 进入更复杂的边缘判断
                    var tdAs_ = $('td[x=' + x1 + ']');
                    var tdBs_ = $('td[x=' + x2 + ']');
                    var tdA_ = tdAs_.eq(0);
                    var tdB_ = tdBs_.eq(0);
                    if (check4boxes(tdA, tdB, tdA_, tdB_, true)) {
                        blnRe = true;
                    } else {
                        tdA_ = tdAs_.eq(intRow_);
                        tdB_ = tdBs_.eq(intRow_);
                        if (check4boxes(tdA, tdB, tdA_, tdB_, true)) {
                            blnRe = true;
                        } else {
                            tdAs_ = $('td[y=' + y1 + ']');
                            tdBs_ = $('td[y=' + y2 + ']');
                            tdA_ = tdAs_.eq(0);
                            tdB_ = tdBs_.eq(0);
                            if (check4boxes(tdA, tdB, tdA_, tdB_, true)) {
                                blnRe = true;
                            } else {
                                tdA_ = tdAs_.eq(intRow_);
                                tdB_ = tdBs_.eq(intRow_);
                                blnRe = check4boxes(tdA, tdB, tdA_, tdB_, true);
                            }
                        }
                    }
                }
                return blnRe;
            }
            
            /* 判断两个格子是否能基于内部消除 */
            function diffXandY_2(x1, y1, x2, y2) {
                var blnRe = false;
                var tdA = $('td[x=' + x1 + ']').eq(y1);
                var tdB = $('td[x=' + x2 + ']').eq(y2);
                var tdAs = $('td[x=' + x1 + ']');
                var tdBs = $('td[x=' + x2 + ']');
                var tdA_;
                var tdB_;
                var i;
                for (i = 0; i < intRow; i ++) {
                    tdA_ = tdAs.eq(i);
                    tdB_ = tdBs.eq(i);
                    blnRe = check4boxes(tdA, tdB, tdA_, tdB_, false);
                    if (blnRe) {
                        break;
                    }
                }
                if (!blnRe) { // 行列不能进行消除的话,进入纵列扫描
                    tdAs = $('td[y=' + y1 + ']');
                    tdBs = $('td[y=' + y2 + ']');
                    for (i = 0; i < intRow; i ++) {
                        tdA_ = tdAs.eq(i);
                        tdB_ = tdBs.eq(i);
                        blnRe = check4boxes(tdA, tdB, tdA_, tdB_, false);
                        if (blnRe) {
                            break;
                        }
                    }
                }
                return blnRe;
            }
            
            /* 判断两个格子能否消除的入口函数 */
            function canBeRemoved(tdA, tdB, complex, exComplex) {
                var aX = tdA.attr('x');
                var aY = tdA.attr('y');
                var bX = tdB.attr('x');
                var bY = tdB.attr('y');
                var blnRe = false;
                if ((aX == bX && Math.abs(aY - bY) == 1) || (aY == bY && Math.abs(aX - bX) == 1)) { // 两格子是邻居?
                    blnRe = true;
                } else if ((complex || exComplex) && ((aX == bX && (aX == 0 || aX == intRow - 1)) || (aY == bY && (aY == 0 || aY == intRow - 1)))) { // 两格子在边缘?
                    blnRe = true;
                } else if ((aX == bX && sameXorY(aX, aY, bY, 'x')) || (aY == bY && sameXorY(aY, aX, bX, 'y'))) { // 两格子同行或同列?
                    blnRe = true;
                } else if (complex) {
                    if (diffXandY_1(aX, aY, bX, bY)) { // 复杂的判断
                        blnRe = true;
                    } else { // 更复杂的判断
                        blnRe = diffXandY_2(aX, aY, bX, bY);
                    }
                }
                return blnRe;
            }
            
            /* 计时并显示 */
            function timer() {
                if (blnTimer) {
                    $('button').first().html('已用时' + (++intSeconds) + '秒 点击重新排列');
                    setTimeout(timer, 1000);
                }
            }
            
            /* 重新排列 */
            function refresh() {
                var tds = $('td');
                var arrTd = [];
                for (var i = 0; i < intCntBoxes; i ++) {
                    arrTd[i] = tds.eq(i)[0].outerHTML;
                }
                randArr(arrTd);
                var k = 0;
                var s = '';
                var strTable = '<table>';
                for (i = 0; i < intRow; i ++) {
                    strTable += '<tr>';
                    for (var j = 0; j < intRow; j ++) {
                        s = arrTd[k].replace(/x="\d+"/, 'x="' + i + '"');
                        s = s.replace(/y="\d+"/, 'y="' + j + '"');
                        strTable += s;
                        k ++;
                    }
                    strTable += '</tr>';
                }
                strTable += '</table>';
                $('div').last().html(strTable);
                $('td').each(function() {
                    $(this).click(td_click);
                });
            }
            
            /* 判断是否完成游戏 */
            function isCompleted() {
                if ($('.removed').length == intCntBoxes) {
                    blnTimer = false;
                    var btn = $('button').first();
                    btn.unbind();
                    btn.html('点击再来一局');
                    btn.bind('click', function() {
                        window.location.replace(window.location.href);
                    });
                    $('td').unbind();
                    if (confirm('好厉害,共用时' + intSeconds + '秒,再来一局?')) {
                        window.location.replace(window.location.href);
                    }
                }
            }
            
            /* 格子被点击的事件 */
            var td_click = function() {
                var _this = $(this);
                var _otherActives = $('.active');
                if (_otherActives.length <= 1) {
                    if (_this.hasClass('common')) {
                        _this.removeClass('common');
                        _this.addClass('active');
                        var _otherActive = _otherActives.first();
                        var _otherActiveNum = parseInt(_otherActive.html());
                        if (!isNaN(_otherActiveNum)) {
                            var _thisNum = parseInt(_this.html());
                            if (_thisNum != _otherActiveNum) {
                                _otherActive.removeClass('active');
                                _otherActive.addClass('common');
                            } else {
                                if (canBeRemoved(_this, _otherActive, true, false)) {
                                    _this.removeClass('common');
                                    _this.removeClass('active');
                                    _this.addClass('removed');
                                    _this.html(' ');
                                    _otherActive.removeClass('common');
                                    _otherActive.removeClass('active');
                                    _otherActive.addClass('removed');
                                    _otherActive.html(' ');
                                    isCompleted();
                                } else {
                                    _this.removeClass('active');
                                    _this.addClass('common');
                                    _otherActive.removeClass('active');
                                    _otherActive.addClass('common');
                                }
                            }
                        }
                    } else if (_this.hasClass('active')) {
                        _this.removeClass('active');
                        _this.addClass('common');
                    }
                }
            }
            
            var intRow = 10; // 设置行数,必须是个偶数,开成一个n*n的格子阵列
            var intCntBoxes = intRow * intRow;
            var intHalfCntBoxes = intCntBoxes / 2;
            var blnTimer = false;
            var intSeconds = 0;
            $(document).ready(function() {
                var arrNum = [];
                var arrTd = [];
                for (var k = 0; k < intHalfCntBoxes; k ++) {
                    arrNum[k] = getRandNum();
                    arrTd[k] = ' class="common" align="center" valign="middle">' + arrNum[k] + '</td>';
                }
                randArr(arrNum);
                for (k = 0; k < intHalfCntBoxes; k ++) {
                    arrTd[k + intHalfCntBoxes] = ' class="common" align="center" valign="middle">' + arrNum[k] + '</td>';
                }
                randArr(arrTd);
                var strTable = '<table>';
                k = 0;
                for (var i = 0; i < intRow; i ++) {
                    strTable += '<tr>';
                    for (var j = 0; j < intRow; j ++) {
                        strTable += '<td x="' + i + '" y="' + j + '"' + arrTd[k];
                        k ++;
                    }
                    strTable += '</tr>';
                }
                strTable += '</table>';
                $('div').first().html(strTable);
                $('div').first().before('<div><button onclick="refresh();">Refresh</button></div>');
                $('td').each(function() {
                    $(this).click(td_click);
                });
                blnTimer = true;
                timer();
            });
        </script>
    </head>
    <body>
        <div></div>
    </body>
</html>